<template>
  <div style="z-index: 10000" class="detail_sku_v1_main show">
    <div class="main" id="popupMain">
      <div class="header">
        <div>
          <img alt="商品图" :src="pic" class="avt" id="popupImg" ptag="7001.1.239" />
          <p class="price" id="priceSale2">
            ¥
            <em>{{price}}</em>
            <span class="price_decimals">.00</span>
          </p>
          <p class="prop" id="popupSkuChoose">
            <span>已选</span>
            {{select.join(",")}}
          </p>
        </div>
        <i class="close" id="popupClose" @click="closes()"></i>
      </div>
      <div class="body">
        <a href="javascript:void(0)" class="size_recommend" id="popupSizeSug" style="display:none;"></a>
        <div id="carBind" style="display: none;"></div>
        <div class="detail_car_install_pop" id="carInstallPop" style="display: none;">
          <div class="car_service_choose">
            <div class="tit">安装服务</div>
            <div class="btn_warp">
              <span class="btn_choose cur" btype="1">到店安装</span>
              <span class="btn_choose" btype="0">无需安装</span>
            </div>
          </div>
          <div class="car_service_tip"></div>
        </div>
        <div id="popupSkuArea" v-for="(item,i) in productAttributeList" :key="i">
          <div class="sku_kind">{{item.name}}</div>
          <div class="sku_choose" id="skuPop1">
            <span
              class="item"
              v-for="(items,j) in item.inputList.split(',')"
              v-bind:class="{active:items==select[i]}"
              :key="j"
              @click="addClassFun(items,i,items)"
            >{{items}}</span>
          </div>
        </div>
        <div id="popupSkuAttach" style="display: none;"></div>

        <div class="count_choose" id="popupCount">
          <div class="num_wrap_v2">
            <span class="minus" :class="num<=1?'disable':''" id="minus1" @click="reduce()">
              <i class="row"></i>
            </span>
            <div class="text_wrap">
              <input class="text" type="tel" v-model="num" id="buyNum1" @input="input()" />
            </div>
            <span class="plus" id="plus1" @click="plus()">
              <i class="row"></i>
              <i class="col"></i>
            </span>
          </div>
          <p class="count">
            数量
            <em class="store" style="display: none;"></em>
          </p>
        </div>
      </div>
      <div class="time_left_tips" id="popupNotice" style="display: none;"></div>
      <!-- E 京喜APP专享预约抢购口罩引导唤起浮层 -->
      
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      list: [],
      productAttributeList: [],
      pic: null,
      select: [],
      selectData: [],
      price: 0,
      selectE: [],
      num: 1,
    };
  },
  props: ["lists"],
  methods: {
    closes() {
      this.$emit("close");
    },
    addClassFun(data, i, j) {
      this.$set(this.selectData, i, data);
      this.$set(this.select, i, j);
    },
    setList(data) {
      if (data != null) {
        this.list = data;
      }
    },
    plus() {
      this.num += 1;
    },
    reduce() {
      if (this.num > 1) {
        this.num -= 1;
      }
    },
    input() {
      if (this.num % 1 === 0) {
        if (this.num <= 1) {
          this.num = 1;
        }
      } else {
        this.num = 1;
      }
    },
  },
  mounted() {
    let top =
      window.screen.height - document.getElementById("popupMain").offsetHeight;
    document.getElementsByClassName("detail_sku_v1_main")[0].style.marginTop =
      top + "px";

    this.$nextTick(() => {
      this.setList(this.$props.lists);
      this.pic = this.list.product.pic;
      this.productAttributeList = this.list.productAttributeList;
      this.list.productAttributeList.forEach((element) => {
        this.select.push(element.inputList.split(",")[0]);
      });
    });
  },
  created() {},
  updated() {
    let _this = this;
    this.list.skuStockList.forEach((e) => {
      let index = 0;
      let data = JSON.parse(e.spData);
      for (let i = 0; i < data.length; i++) {
        if (data[i].value == this.select[i]) {
          index++;
        }
      }

      if (index == data.length) {
        _this.price = e.price;
        _this.selectE = e;
      }
    });
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/css/jd_detail_jdscene.min.css");

.count {
  margin-bottom: 50px;
}
</style>